import { StyleSheet, ToastAndroid } from 'react-native'
import React, { useState } from 'react'
import {
  Center, Box, Heading, VStack, FormControl, Input,
  Link, HStack, Button, Text
} from 'native-base'
import axios from '../axios'
import { connect } from 'react-redux'
import { loginAction } from '../redux/actionCreator/user'
import useCatch from '../axios/useCatch'
import { setMsgListAction } from '../redux/actionCreator/chat'

const Login = ({ navigation, loginAction, setMsgListAction }) => {
  const [formData, setData] = useState({
    username: '666666',
    password: '666666'
  });
  const [errors, setErrors] = useState({});
  // 表单验证方法
  const validate = () => {
    if (formData.username === undefined) {
      setErrors({
        username: '用户名不能为空！'
      });
      return false;
    } else if (formData.username.length < 2) {
      setErrors({
        username: '用户名不能小于两个字符！'
      });
      return false;
    } else if (formData.password === undefined) {
      setErrors({
        password: '密码不能为空！'
      });
      return false;
    }
    setErrors({})
    console.log(1)
    return true;
  };
  // 提交表单
  const submit = () => {
    console.log(formData)
    validate() && login()
  }

  const login = () => {
    axios.post('/login', formData).then(res => {
      loginAction(res.data)
      console.log('执行了', res.data)

      axios.get('/friend').then(res => {
        console.log('调用接口', res.data)
        setMsgListAction(res.data)
      }).catch((err) => { })

      navigation.replace('TabBar', {
        initialRouteName: 'Mine'
      })
    }).catch((err)=>{})
  }
  const register = () => {
    ToastAndroid.show('暂未开发', ToastAndroid.SHORT)
  }

  return (
    <Center w="100%">
      <Box safeArea p="2" py="8" w="90%" maxW="290">
        <Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{
          color: "warmGray.50"
        }}>
          校园集市
        </Heading>
        <Heading mt="1" _dark={{
          color: "warmGray.200"
        }} color="coolGray.600" fontWeight="medium" size="xs">
          欢迎使用，赶快登录试试吧！
        </Heading>

        <VStack space={3} mt="5">
          <FormControl isRequired isInvalid={'username' in errors}>
            <FormControl.Label>用户名</FormControl.Label>
            <Input value={formData.username} placeholder='请输入用户名' onChangeText={value => setData({
              ...formData,
              username: value
            })} />
            {'username' in errors && <FormControl.ErrorMessage>{errors.username}</FormControl.ErrorMessage>}
          </FormControl>
          <FormControl isRequired isInvalid={'password' in errors}>
            <FormControl.Label>密码</FormControl.Label>
            <Input type="password" value={formData.password} placeholder='请输入密码 ' onChangeText={value => setData({
              ...formData,
              password: value
            })} />
            {'password' in errors && <FormControl.ErrorMessage>{errors.password}</FormControl.ErrorMessage>}
            {/* <Link _text={{
              fontSize: "xs",
              fontWeight: "500",
              color: "indigo.500"
            }} alignSelf="flex-end" mt="1">
              忘记密码?
            </Link> */}
          </FormControl>
          <Button mt="2" colorScheme="indigo" onPress={submit}>
            登录
          </Button>
          <HStack mt="6" justifyContent="center">
            <Text fontSize="sm" color="coolGray.600" _dark={{
              color: "warmGray.200"
            }}>
              还没有账号.{" "}
            </Text>
            <Link _text={{
              color: "indigo.500",
              fontWeight: "medium",
              fontSize: "sm"
            }} onPress={register}>
              注册
            </Link>
            {/* <Text style={{
              color: "indigo",
            }} onPress={register}>注册</Text> */}
          </HStack>
        </VStack>
      </Box>
    </Center>
  )
}

export default connect(() => ({}), {
  loginAction,
  setMsgListAction
})(Login)

const styles = StyleSheet.create({})